<template>
  <div class="pagestyle">
    <topbottomCom :optionsquery="1">
      <template v-slot:dragTopSlot>
        <list_controller @query="query" ref="zujianname" :options="state.options" @cellClickEvent="cellClickEvent"
          :showCaozuo="state.showCaozuo">
          <template v-slot:opraCurdBtnAll>
            <span :class="
                state.listBtnType == 1 ? 'listInfoBtn active' : 'listInfoBtn'
              " @click="listInfoBtnClick(1)">
              <svg-icon :class="state.listBtnType == 1 ? 'active' : ''" class-name="search-icon" icon-class="qiehuan" />
              实时分站信息
            </span>
          </template>
          <template v-slot:selectNamelist>历史变动分站</template>
        </list_controller>
      </template>
      <template v-slot:dragBottomSlot>
        <list_controller :showCaozuo="state.showCaozuo" ref="zujiannametwo" :descQuery="state.descObj" :options="state.optionstwo"
          @pagechange="pagechange">
          <template v-slot:opraCurdBtnlist="row">
            <span>
              <el-button class="tableFontSize" type="primary" link size="small" @click="lookBtn(row.row.row)">填写
              </el-button>
              <el-button class="tableFontSize" type="primary" link size="small" @click="editBtn(row.row.row)"
                v-if="row.row.row.templateDto != null">查看</el-button>
            </span>
          </template>
          <template v-slot:selectNamelist> 详细信息(总计) </template>
        </list_controller>
      </template>
    </topbottomCom>
    <!-- 填写分析 -->
    <fillayaCom :fillayaComShow="state.fillayaComShow" @submitFormfillayaCom="submitFormfillayaCom"
      :tempList="state.tempList"></fillayaCom>
    <!-- 查看曲线 -->
    <chartCom :openChart="state.showChart" :data="state.chartData" @closeChart="closeChart">
    </chartCom>
    <!-- 查看分析 -->
    <ayadetailCom :detailsList="state.detailsList" :detailsShow="state.detailsShow"></ayadetailCom>
  </div>
</template>
<script setup>
  import querybox from "@/components/commonCom/querybox"; //用于首页抽屉查询处理
  import topbottomCom from "./listCom/topbottomCom.vue";
  import list_controller from "@/components/commonCom/list_controller";
  import fillayaCom from "./listCom/fillayaCom.vue";
  import ayadetailCom from "./listCom/ayadetailCom.vue";
  import chartCom from "./listCom/chartCom.vue";
  import {
    computed,
    onMounted,
    reactive
  } from "vue";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import {
    ElMessage,
    ElMessageBox,
    ElNotification
  } from "element-plus";
  import dayjs from "dayjs";
  import {
    searchareaTree
  } from "@/api/config";
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  const router = useRouter();
  let previewHttps =
    import.meta.env.VITE_APP_HTTP;
  const upload = ref(null);

  let state = reactive({
    detailsShow: false,
    detailsList: [],
    tempList: [],
    fillayaComShow: false, //控制填写分析抽屉显示
    listBtnType: undefined,
    options: {
      tableheads: computed(() => table_headers.stationFluctuation), //分站变动
      queryList: {
        queryTitle: '选择分站',
        querys: [{
            fieldsearch: "conditionType",
            field: "conditionType",
            title: "查询方式",
            type: "radiospecial",
            binddata: 1,
            options: [{
                label: "时间查询",
                value: 1,
              },
              {
                label: "班次查询",
                value: 2,
              },
            ],
          },
          {
            field: ["faultStartTime", "faultEndTime"],
            fieldsearch: ["faultStartTime", "faultEndTime"],
            title: "时间范围",
            col: 12,
            type: "datetimestartEnd",
            binddata: [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format(
              'YYYY-MM-DD HH:mm:ss')],
            typespecial: 2,
            show: false,
          },
          {
            field: "datetime",
            fieldsearch: "datetime",
            title: "日期",
            type: "datetime",
            binddata: dayjs().format('YYYY-MM-DD'),
            typespecial: 1,
            show: true,
          },
          {
            fieldsearch: "banci",
            field: "banci",
            title: "班次选择",
            type: "selectspecial",
            binddata: "",
            options: [],
            typespecial: 1,
            show: true,
          },
          {
            field: "areaName",
            title: "所在区域",
            type: "cascaderRadionarmal",
            binddata: "",
            options: [],
            props: {
              children: "childList",
              value: "areaName",
              label: "areaName",
              checkStrictly: true,
              emitPath: false,
            },
          },
          {
            fieldsearch: ["placeName", "stationCode", undefined],
            field: ["placeName", "stationCode", undefined],
            title: "选择分站",
            type: "cascaderRadioSpecial",
            binddata: "",
            options: [],
            props: {
              children: "children",
              value: "commonField",
              label: "commonField",
              checkStrictly: true,
              emitPath: false,
            },
          },

          {
            field: "flag",
            title: "持续时间范围(秒)",
            type: "switchopenSearch",
            col: 3,
            binddata: false,
          },
          {
            field: ["lowerSeconds", 'upperSeconds'],
            fieldsearch: ["lowerSeconds", 'upperSeconds'],
            title: "",
            col: 3,
            type: "inputrange",
            binddata: ['', ''],
            options: [],
            disabled: true
          },
        ],
      },
      dataUrl: "/hisStation/fault/listStationFluctuation",
    },
    optionstwo: {
      queryList: {
        detailListSear: true,
        autoSearch: true,
        querys: [],
      },
      tableheads: computed(() => table_headers.stationFluctuationDetail), //分站故障详情
      dataUrl: "/hisStation/fault/listStationFluctuationDetail",
    },
    editId: undefined,
    banciList: [],
    showCaozuo: true,
    data: {},
    areaObj: {},
    descObj: {},
    showChart: false,
    chartData: {},
    typePoint: 2
  });
  // 填写分析抽屉
  function lookBtn(row) {
    state.editId = row.id;
    state.fillayaComShow = dayjs().unix();
  }
  // 提交填写分析
  function submitFormfillayaCom(data) {
    let dataObj = {};
    dataObj.id = state.editId;
    dataObj.templateDto = data;
    if (data) {
      axios.post("/hisStation/fault/modifyTemplate", dataObj).then((res) => {
        proxy.$modal.msgSuccess(res.msg);
        state.fillayaComShow = false;
        proxy.$refs.zujiannametwo.getData({
          ...state.descObj
        });
      });
    } else {
      state.fillayaComShow = false;
    }
  }

  function listInfoBtnClick(type) {
    state.listBtnType = type;
    if (type == 1) {
      goPage();
    }
    if (type == 2) {
      if (store.records.length == 0 || store.records.length > 1) {
        ElMessage.error('请选择一个测点')
        state.listBtnType = undefined;
        return
      } else {
        state.showChart = !state.showChart
        state.chartData = {
          pointIds: [store.records[0].pointId],
          queryStartTime: store.records[0].cutStartTime,
          queryEndTime: store.records[0].cutEndTime,
        }
      }
    }
  }
  // 编辑按钮
  function editBtn(row) {
    if (row.templateDto != null) {
      state.detailsShow = dayjs().unix();
    }
    state.detailsList = row.templateDto;
  }

  function cellClickEvent(row) {
    store.records=[]
    state.descObj.stationCode = row.stationCode
    state.data = {
      stationCode: row.stationCode,
      stationStatus: state.typePoint
    }
    proxy.$refs.zujiannametwo.getData({
      ...state.descObj
    });
  }

  function pagechange() {
    proxy.$refs.zujiannametwo.getData({
      ...state.descObj
    });
  }

  function query(type) {
    if (type == 1) {
      state.options.queryList.querys.forEach((item) => {
        if (item.field == 'inputrange') {
          if (item.bindData[1] < item.bindData[0]) {

          }
        }
      })
    }
    if (type == 2) {
      proxy.$refs.zujiannametwo.state.tabledata = []
      getconditionList(state.typePoint, state.areaObj)
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "inputrange") {
          item.binddata = ''
        }
        if (item.field == "flag") {
          item.binddata = false
        }
      })
    }
    if (type.type == 4) {
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "stationStatus") {
          item.binddata = type.val;
          state.typePoint = item.binddata;
          proxy.$refs.zujiannametwo.state.tabledata = []
        }
      });
      getconditionList(state.typePoint, state.areaObj);
    }
    if (type.type == 44) {
      state.options.queryList.querys.forEach((item) => {
        if (item.type == 'cascaderRadioSpecial') {
          if (item.binddata == '' || !item.binddata) {
            state.areaObj['areaId'] = type.val2
            getconditionList(state.typePoint, state.areaObj);
          }
        }
      })
    }
    if (type.type == 5) {
      let dataObj = {
        dateSuffix: undefined,
        classInfo: {},
      };
      state.options.queryList.querys.forEach((item) => {
        if (type.val1) {
          dataObj.dateSuffix = type.val1
          if (item.fieldsearch == "banci"&&type.item.type!='datetimestartEnd') {
            state.banciList.forEach((itemsub) => {
              if (itemsub.id == item.binddata) {
                dataObj.classInfo = itemsub;
                dataObj.typeLabel=2
                banciList(dataObj);
              }
            });
          }
        } else {
          if (item.fieldsearch == "datetime") {
            dataObj.dateSuffix = item.binddata;
          }
        }
        if (item.fieldsearch == "banci") {
          state.banciList.forEach((itemsub) => {
            if (type.val == 0) {
              type.val = state.banciList[0].id
            }
            if (itemsub.id == type.val) {
              dataObj.classInfo = itemsub;
              dataObj.typeLabel=2
              banciList(dataObj);
            }
          });
        }
      });
    }
    if (type.type == 'topConnectBom') {
      state.descObj = type.data
      proxy.$refs.zujiannametwo.state.tabledata = []
    }
    if (type.type == 'switchopenSearch') {
      state.options.queryList.querys.forEach((item) => {
        if (item.type == 'inputrange') {
          item.disabled = !type.val
          if (!type.val) {
            if (item.type == 'inputrange') {
              item.binddata = ['', '']
            }
          }
        }
      })
    }
  }

  function getbanciList() {
    axios.post("/class/info/searchAll", {}).then((res) => {
      state.banciList = res.data.list;
      state.options.queryList.querys.forEach((item) => {
        if (item.fieldsearch == "banci") {
          item.options = res.data.list.map((item) => {
            return {
              label: item.className,
              value: item.id,
            };
          });
          item.binddata = item.options[0].value
        }
      });
    });
  }
  getbanciList();

  function banciList(dataObj) {
    axios.post("/hisPointFeed/handleClassInfo", dataObj).then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if(dataObj.typeLabel!=2||state.options.queryList.querys[0].binddata==2){
          if (item.type == "datetimestartEnd") {
            item.binddata = [res.data.feedStartTime, res.data.feedEndTime];
          }
        }
      });
    });
  }

  function getSelList() {
    searchareaTree().then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "areaName") {
          item.options = res.data;
        }
      });
    });
  }

  function getconditionList(type, val) {
    axios
      .post('/hisStation/fault/attainStationStructure', val)
      .then((res) => {
        state.options.queryList.querys.forEach((item) => {
          if (item.type == "cascaderRadioSpecial") {
            item.options = res.data;
          }
        });
      });
  }
  getconditionList(state.typePoint, state.areaObj)
  getSelList();

  onMounted(() => {
 
  });
  // 跳转实时断电异常页面
  const goPage = () => {
    router.push({
      name: "Lb_realStationInfo"
    });
  };
  // 关闭曲线
  const closeChart = () => {
    state.listBtnType = undefined
    state.showChart = false
  }
</script>
<style lang="scss" scoped>
  .xiazai {
    position: absolute;
    top: 42px;
    right: 110px;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 99;

    .item {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .item:hover {
      background-color: #ececec;
    }
  }

  ::v-deep .el-drawer {
    .querycss {
      .fsc {
        &:nth-child(2) {
          display: none;
        }
      }
    }

    .table_box {
      .fsc {
        display: none;
      }
    }
  }
</style>